<template>
  <view class="container">
    <view class="container-top c-fff jh-flex jh-column jh-justify-flexend">
      <view class="jh-align-center" @tap="$navigateTo('/pages/own/detail')">
        <image class="container-top-avatar" :src="info.head_pic ? info.head_pic : ossDomain + '/wx.png'"></image>
        <view class="jh-flex jh-column padding-l30">
          <view class="jh-align-flexend">
            <view class="font-45 jh-line-height">{{info.name || ''}}</view>
            <view class="font-24 jh-line-height padding-l16">{{info.professional_title || ''}}</view>
          </view>
          <view class=" padding-t16 jh-align-center jh-space-between" style="width: 478rpx;">
            <view class="font-30 jh-line-height">
              卡罗琳号：{{info.kaluolin_username || ''}}
            </view>
            <image style="width: 15rpx;height: 27rpx;display: block;" :src="ossDomain + '/rightArrow.png'"></image>
          </view>
        </view>
      </view>
      <view class="margin-t40 jh-align-center" style="height: 116rpx;border-top: 1px solid #ADB6B7;">
        <view class="container-top-tag font-24">
          三甲
        </view>
        <view class="font-24">
          {{info.hospital || ''}}
        </view>
      </view>
      <view>
      </view>
    </view>
    <view style="height: 15rpx;background-color: #ddd;"></view>
    <view class="container-item" v-if="info.skill">
      <view class="font-32 c-000">擅长及诊所介绍</view>
      <view class="font-28 c-999 padding-t10" style="word-break: break-all;">
        {{info.skill || ''}}
      </view>
    </view>
    <view class="container-item" v-if="info.educational_background">
      <view class="font-32 c-000">教育背景</view>
      <view class="font-28 c-999 padding-t10" style="word-break: break-all;">
        {{info.educational_background || ''}}
      </view>
    </view>
    <view class="container-item" v-if="info.send_word">
      <view class="font-32 c-000">寄语</view>
      <view class="font-28 c-999 padding-t10" style="word-break: break-all;">
        {{info.send_word || ''}}
      </view>
    </view>
    <u-tabbar
      :value="value1"
      inactiveColor='#000'
      activeColor='#93b262'
      :customStyle="tabBarStyle"
      :border='false'
    >
      <u-tabbar-item text="消息" :badge='unreadCount' icon="/static/theme/chat.png" @click="switchTab" ></u-tabbar-item>
      <u-tabbar-item text="账号" icon="/static/theme/own-theme.png"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  export default {
    data() {
      return {
        tabBarStyle: {
          "backgroundColor": "#ededed",
        },
        value1: 1,
        ossDomain: uni.ossDomain,
        info: {}
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo,
        allConversation: state => {
          let arr = state.conversation.allConversation
          return arr
        },
      }),
      unreadCount () {
        let arr = this.allConversation
        let unreadCount = 0
        arr.forEach(e => {
          unreadCount += e.unreadCount
        })
        return unreadCount
      },
    },
    onShow() {
      this.getInfo()
      this.info = this.userInfo.user
    },
    methods: {
      switchTab (e) {
        if (e === 0) {
          uni.switchTab({
            url: '/pages/index/main'
          })
        } else if(e === 1) {
          uni.switchTab({
            url: '/pages/own/main'
          })
        }
      },
      getInfo () {
        this.$http.getInfo().then(res => {
          this.info = res.data[0]
          this.userInfo.user = Object.assign(this.userInfo.user,this.info)
          this.$store.commit('setUserInfo', this.userInfo);
          this.info = this.userInfo.user
          console.log(this.info);
        })
      },
      open(url) {
        uni.navigateTo({
          url: url
        });
      },
      logout() {
        this.$store.dispatch('resetStore')
        uni.$app.logout()
        wx.hideLoading()
        wx.reLaunch({
          url: '../login/main'
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .container {

    &-top {
      height: 350rpx;
      background-color: #00374D;
      padding: 0 50rpx;
      box-sizing: border-box;

      &-avatar {
        width: 143rpx;
        height: 143rpx;
        border-radius: 50%;
      }

      &-tag {
        padding: 4rpx 8rpx;
        margin-right: 10rpx;
        border-radius: 3rpx;
        background-color: #93B262;
      }
    }
    &-item{
      padding: 50rpx;
      border-bottom: 1px solid #ddd;
    }
  }
</style>
